<template>
  <div class="xtx_banner">
    <swiper :options="swiperOption" v-if="bannerList.length">
      <swiper-slide v-for="item in bannerList" :key="item.id">
        <a :href="item.hrefUrl">
          <img style="width:1240px;height:500px" :src="item.imgUrl" alt />
        </a>
      </swiper-slide>
      <div class="swiper-pagination indicator" :class="{offset:offset}" slot="pagination"></div>
      <a href="javascript:;" class="prev" :class="{offset:offset}" slot="button-prev">
        <span class="iconfont icon-angle-left"></span>
      </a>
      <a href="javascript:;" class="next" slot="button-next">
        <span class="iconfont icon-angle-right"></span>
      </a>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'home-banner',
  props: {
    offset: {
      default: false
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      bannerList: [],
      swiperOption: {
        effect: 'fade',
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.next',
          prevEl: '.prev'
        },
        loop: true,
        autoplay: true
      }
    }
  },
  created () {
    this.getBanner()
  },
  methods: {
    getBanner () {
      this.$http.get('/home/banner').then((res) => {
        this.bannerList = res.data.result
      })
    }
  }
}
</script>

<style scoped lang='less'>
// 焦点图
.xtx_banner {
  width: 1240px;
  height: 500px;
  overflow: hidden;
  position: relative;

  &:hover a {
    opacity: 1;
  }

  // 切换按钮
  .prev,.next {
    display: block;
    width: 44px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    border-radius: 50%;
    margin-top: -22px;
    opacity: 0;
    transition: opacity 0.5s;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 50%;
    color: #f5f5f5;
    z-index: 999;
    span {
      font-size: 20px;
    }
    &.prev {
      left: 20px;
      &.offset{
        left: 270px;
      }
    }

    &.next {
      right: 20px;
    }
  }

  // 指示器
  .indicator {
    width: 1240px;
    text-align: center;
    font-size: 0;
    position: absolute;
    left: 0;
    bottom: 22px;
    &.offset{
      left: 250px;
      width: 990px;
    }
    ::v-deep span {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin: 0 8px;
      cursor: pointer;
      border-radius: 50%;
      background-color: rgba(0, 0, 0, 0.6);

      &.swiper-pagination-bullet-active {
        background-color: #fff;
      }
    }
  }
}
</style>
